import React, { useEffect, useState } from "react";
import axios from "../../api/axios";
import { Button, Space, Table, Tag } from "antd";
import { Checkbox, Form, Input } from "antd";
import { Modal } from "antd";
import { addList } from "../../api/user";
function Index() {
  const [data, setData] = useState("");
  const [count, setcount] = useState(0);
  const [page, setpage] = useState(1);
  const [content, setcontent] = useState();
  const [pageSize, setpageSize] = useState(10);
  const [title, settitle] = useState();
  const [addForm] = Form.useForm();
  const getData = () => {
    axios
      .get("/article/list", {
        params: {
          keyword: content,
          page: page,
          pageSize: pageSize,
        },
      })
      .then((res) => {
        console.log(res);
        setData(res.data.rows);
        setcount(res.data.count);
      });
  };
  useEffect(() => {
    getData();
  }, [page, pageSize, content]);
  //添加
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
    settitle("添加");
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const Finish = async (values) => {
    console.log("Success:", values);
    const data = {
      title: values.title, //文章标题
      content: values.content, //文章内容
      tagList: ["HTTP"], //标签  array[string]
      categoryList: ["HTTP"], //分类  array[string]
      authorId: 47529555, //用户id 暂时写死47529555 登陆成功后返回的用
    };
    const res = await addList(data);
    console.log(res);
    alert("添加成功");
    setIsModalOpen(false);
    getData();
  };
  const FinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };
  //搜索
  const onFinish = (values) => {
    console.log("Success:", values);
    setcontent(values.content);
  };
  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };
  //重置
  //  const chong=(values)=>{
  //   setcontent(values(''))
  // }

  //分页
  const add = (page, pageSize) => {
    setpage(page);
    setpageSize(pageSize);
  };
  const columns = [
    {
      title: "ID",
      dataIndex: "id",
      key: "id",
      render: (text) => <a>{text}</a>,
    },
    {
      title: "内容",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "信息",
      dataIndex: "content",
      key: "content",
    },

    {
      title: "Action",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <Button>删除</Button>
          <Button>详情</Button>
          <Button>编辑</Button>
        </Space>
      ),
    },
  ];
 
  return (
    <div>
      <Form
        name="basic"
        layout="inline"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 1000 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item
          label="搜索"
          name="content"
          rules={[{ required: true, message: "请输入搜索" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item label={null}>
          <Button type="primary" htmlType="submit">
            搜索
          </Button>
        </Form.Item>
        <Button onClick={()=>chong}>重置</Button>
        <Button type="primary" onClick={showModal}>
          添加
        </Button>
      </Form>
      <Modal
        title={title}
        closable={{ "aria-label": "Custom Close Button" }}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form
          name="basic"
          form={addForm}
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={Finish}
          onFinishFailed={FinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="内容"
            name="title"
            rules={[{ required: true, message: "不能为空" }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="信息"
            name="content"
            rules={[{ required: true, message: "不能为空" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item label={null}>
            <Button type="primary" htmlType="submit">
              确定
            </Button>
          </Form.Item>
        </Form>
      </Modal>
      <Table
        columns={columns}
        dataSource={data}
        pagination={{
          total: count,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total) => `Total ${total} items`,
          onChange: add,
        }}
      />
    </div>
  );
}

export default Index;
